{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div class="row">
  <div class="service_template_param service_role st_man medium-6 columns">
    <label>
      {{tr "Role name"}}
      <input type="text" id="role_name" name="name" aria-describedby="helpText" required pattern="^\w+$"/>
      <small class="form-error">{{tr "Can only contain alphanumeric and underscore characters"}}</small>
    </label>
  </div>
  <div class="service_template_param service_role medium-2 columns end">
    <label>
      {{tr "Number of VMs"}}
      <input type="number" min="0" id="cardinality" name="cardinality" value="1"/>
    </label>
  </div>
</div>
<div class="row">
  <div class="service_template_param service_role small-12 columns">
    <label>
      {{tr "VM template to create this role's VMs"}}
    </label>
    <br/>
    {{{templatesTableHTML}}}
  </div>
</div>
<div class="row">
  <div class="service_template_param service_role medium-6 columns">
    <table class="networks_role dataTable">
      <thead>
        <tr>
          <th colspan="2">
            <i class="fa fa-lg fa-fw fa-globe off-color"/>{{tr "Network Interfaces"}}
          </th>
        </tr>
      </thead>
      <tbody class="networks_role_body">
      </tbody>
    </table>
  </div>
  <div class="service_template_param service_role medium-6 columns">
    <table class="parent_roles dataTable">
      <thead>
        <tr>
          <th colspan="2">
            {{tr "Parent roles"}}
          </th>
        </tr>
      </thead>
      <tbody class="parent_roles_body">
      </tbody>
    </table>
  </div>
</div>
<br>
<div class="row">
  <div class="large-12 columns elasticity_accordion">
    {{#advancedSection (tr "Role elasticity") }}
    <div class="row">
      <div class="medium-4 columns">
        <label>
          {{tr "Min VMs"}}
          <input type="number" min="0" id="min_vms" name="min_vms" value="" />
        </label>
      </div>
      <div class="medium-4 columns">
        <label>{{tr "Max VMs"}}
          <input type="number" min="0" id="max_vms" name="max_vms" value="" />
        </label>
      </div>
      <div class="service_template_param service_role medium-4 columns">
        <label>
          {{tr "Cooldown"}}
          <span class="tip">{{tr "Cooldown time after an elasticity operation (seconds)"}}</span>
          <input type="number" min="0" id="cooldown" name="cooldown" value="" />
        </label>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <table id="elasticity_policies_table" class="policies_table dataTable">
          {{> tabs/oneflow-templates-tab/utils/role-tab/elasticity-thead}}
          <tbody id="elasticity_policies_tbody">
          </tbody>
          <tfoot>
            <tr>
              <td colspan="8">
                <a type="button" class="button small radius secondary small-12" id="tf_btn_elas_policies"><i class="fa fa-lg fa-plus-circle"></i></a>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <br>
    <div class="row">
      <div class="large-12 columns">
        <table id="scheduled_policies_table" class="policies_table dataTable">
          {{> tabs/oneflow-templates-tab/utils/role-tab/sched-thead}}
          <tbody id="scheduled_policies_tbody">
          </tbody>
          <tfoot>
            <tr>
              <td colspan="6">
                <a type="button" class="button small radius secondary small-12" id="tf_btn_sche_policies"><i class="fa fa-lg fa-plus-circle"></i></a>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    {{/advancedSection}}
  </div>
</div>
<br>
<div class="row">
  <div class="large-12 columns advanced_role_accordion">
    {{#advancedSection (tr "Advanced role parameters") }}
    <div class="row">
      <div class="service_template_param service_role medium-6 columns">
        <label for="shutdown_action_role">{{tr "VM shutdown action"}}
          <span class="tip">{{tr "If it is not set, the one set for the Service will be used"}}</span>
        </label>
        <select name="shutdown_action_role">
          <option value=""></option>
          <option value="terminate">{{tr "Terminate"}}</option>
          <option value="terminate-hard">{{tr "Terminate hard"}}</option>
        </select>
      </div>
      <div class="medium-6 columns">
      </div>
    </div>
    <div class="row">
      <div class="service_template_param st_man large-12 columns">
        <label  for="vm_template_contents">{{tr "VM template content"}}
          <span class="tip">{{tr "This information will be merged with the original Virtual Machine template. Configuration attributes and network interfaces will be replaced by those provided by the user when the template is instantiated"}}</span>
        </label>
        <textarea type="text" rows="4" class="vm_template_contents monospace" name="vm_template_contents" placeholder='ATTRIBUTE = "VALUE"'/>
      </div>
    </div>
    {{/advancedSection}}
  </div>
</div>
